<template>
  <div class="container" v-loading="loading" element-loading-text="正在生成中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
    <div  v-if="testList.length!==0 && isShow2" style="width: 100%;height: 50px;background-color: #8c939d;display: flex;justify-content: flex-end;align-items: center;padding: 10px">
      <el-input style="width: 10%;margin-right: 10px" v-model="input" placeholder="请输入测评名称"></el-input>
      <el-button type="danger" style="height: 100%" @click="deleted">删除</el-button>
    </div>

    <div v-if="testList.length!==0 && isShow2" style="width: 100%">
      <div style="width: 100%;height: 100%;display: flex;flex-wrap: wrap">
        <div class="item1" v-for="(item,index) in testList" :key="index" style="display: flex;flex-direction: column;padding: 5px;cursor: pointer;height: 120px" @click="toContent(item)">
          <img src="@/assets/imgs/试卷.png" style="width: 100px;height: 100px">
          <div style="text-align: center">{{item.testname}}</div>
        </div>

        <div class="item1" style="padding: 10px;height: 120px" @click="create1"><img style="width: 80px;height: 80px;cursor: pointer;" src="@/assets/imgs/创建.jpeg"></div>

      </div>
    </div>


    <el-button v-if="!isExist" @click="create" style="font-size: 40px;width: 600px;height:180px;background-color: #DEEAEF;display: flex;justify-content: center;align-items: center;border-radius: 15px;margin-top: 100px;opacity:0.5;box-shadow:  0 2px 4px rgba(0, 0, 0, .12)">
      点击创建测评活动
    </el-button>

    <el-form v-if="isShow" :rules="rules" ref="formRef" :model="form1" label-width="80px" :style="{height:formHeight+'px'}">
      <el-form-item label="测评名称" prop="testname">
        <el-input v-model="form1.testname" placeholder="请选择测评名称"></el-input>
      </el-form-item>

      <el-form-item label="组卷方式" prop="way">
        <el-select v-model="form1.way" placeholder="请选择组卷方式">
          <el-option label="人工组卷" value="人工组卷"></el-option>
          <el-option label="随机组卷" value="随机组卷"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="测评范围" prop="subject">
        <el-select v-model="form1.subject" placeholder="请选择测评范围">
          <el-option label="数学" value="数学"></el-option>
          <el-option label="语文" value="语文"></el-option>
          <el-option label="英语" value="英语"></el-option>
          <el-option label="物理" value="物理"></el-option>
          <el-option label="化学" value="化学"></el-option>
          <el-option label="生物" value="生物"></el-option>
          <el-option label="政治" value="政治"></el-option>
          <el-option label="历史" value="历史"></el-option>
          <el-option label="地理" value="地理"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item style="display: flex;justify-content: center">
        <el-button style="margin-right: 200px" type="primary" @click="onSubmit">下一步</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>


    <el-form v-if="isShow1" ref="form1" :model="form1" label-width="80px" :style="{height:formHeight+'px'}">
      <el-form-item label="知识点" prop="knowpoint">
        <el-input placeholder="请输入知识点" v-model="form1.knowpoint"></el-input>
      </el-form-item>

      <el-form-item v-if="this.form1.way==='随机组卷'" label="单选题">
        <el-switch @change="onChange1" v-model="form1.sChoice"></el-switch>
      </el-form-item>
      <el-form-item v-else label="单选题">
        <el-switch disabled="" @change="onChange1" v-model="form1.sChoice"></el-switch>
      </el-form-item>

      <el-row v-if="form1.sChoice">
        <el-col span="6">
          <el-form-item label="数量">
            <el-input v-model="form1.choicenum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item v-if="this.form1.way==='随机组卷'" label="填空题">
        <el-switch @change="onChange2" v-model="form1.gFilling"></el-switch>
      </el-form-item>
      <el-form-item v-else label="填空题">
        <el-switch disabled="" @change="onChange2" v-model="form1.gFilling"></el-switch>
      </el-form-item>

      <el-row v-if="form1.gFilling">
        <el-col span="6">
          <el-form-item label="数量">
            <el-input v-model="form1.fillnum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>


      <el-form-item v-if="this.form1.way==='随机组卷'" label="问答题">
        <el-switch @change="onChange3" v-model="form1.qAnswers"></el-switch>
      </el-form-item>
      <el-form-item v-else label="问答题">
        <el-switch disabled="" @change="onChange3" v-model="form1.qAnswers"></el-switch>
      </el-form-item>

      <el-row v-if="form1.qAnswers">
        <el-col span="6">
          <el-form-item label="数量">
            <el-input v-model="form1.dealnum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item style="display: flex;justify-content: center">
        <el-button v-if="this.form1.way==='随机组卷'" style="margin-right: 200px" type="primary" @click="onSubmit1">生成</el-button>
        <el-button v-else style="margin-right: 200px" type="primary" @click="onSubmit2">选择试题</el-button>
        <el-button @click="onCancel1">上一步</el-button>
      </el-form-item>
    </el-form>

    <div class="box1" v-if="isShow3">
      <el-table
          ref="multipleTable"
          :data="table"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
        <el-table-column
            type="selection"
            width="55">
        </el-table-column>
        <el-table-column
            prop="question"
            label="题目"
            width="600">
        </el-table-column>
        <el-table-column
            prop="knowpoint"
            label="知识点"
            show-overflow-tooltip>
        </el-table-column>
        <el-table-column
            prop="type"
            label="题目类型"
            show-overflow-tooltip>
        </el-table-column>
      </el-table>
      <div style="text-align: center;margin-top: 20px">
        <el-button style="margin-right: 200px" type="primary" @click="onSubmit3">生成</el-button>
        <el-button @click="onCancel2">上一步</el-button>
      </div>

    </div>

  </div>

</template>

<script>
export default {
  name: "Test",
  data(){
    return{
      testid:0,
      multipleSelection: [],
      table:[],
      isShow3:false,
      input:'',
      loading:false,
      testList:[],
      count:0,
      isExist:true,
      isShow:false,
      isShow1:false,
      isShow2:true,
      formHeight:250,
      formHeight1:300,
      form1:{
        way:'',
        testname:'',
        subject:'',
        userid:1,
        knowpoint:'',
        sChoice:false,
        mChoice:false,
        gFilling:false,
        qAnswers:false,
        choicenum:0,
        fillnum:0,
        dealnum:0
      },
      list:[
        {
          name:"测试1"
        },
        {
          name:"测试2"
        }
      ],
      rules: {
        testname: [
          { required: true, message: '请输入测评名称', trigger: 'blur' },
        ],
        subject: [
          { required: true, message: '请选择测评范围', trigger: 'blur' }
        ],
        way: [
          { required: true, message: '请选择组卷方式', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getTestList()
  },
  methods:{
    getTestList(){
      this.$request.post('/test/title/all',{userid:JSON.parse(localStorage.getItem("xm-user")).userid}).then(res=>{
        if(res.code === '200'){
          this.testList=res.data
          console.log(this.testList)
        }
        if(this.testList.length===0){
          this.isExist=false
        }
      })
    },
    create(){
      this.isExist=true
      this.isShow=true
    },
    onCancel(){
      if(this.testList.length===0){
        this.isExist=false
      }else{
        this.isShow2=true
      }
      this.isShow=false
      this.formHeight=250
      this.formHeight1=300
      this.form1={
        testname:'',
        subject:'',
        userid:1,
        knowpoint:'',
        sChoice:false,
        mChoice:false,
        gFilling:false,
        qAnswers:false,
        choicenum:0,
        fillnum:0,
        dealnum:0
      }
    },
    onCancel1(){
      this.isShow=true
      this.isShow1=false
      this.formHeight1=this.formHeight
      this.formHeight=250
    },
    onCancel2(){
      this.isShow1=true
      this.isShow3=false
      this.formHeight=300
    },
    onSubmit(){
      this.$refs['formRef'].validate((valid) => {
        if (valid) {
          // 验证通过
          this.isShow=false
          this.isShow1=true
          this.formHeight=this.formHeight1
        }
      })
    },
    onSubmit1(){
      this.form1.userid=JSON.parse(localStorage.getItem("xm-user")).userid
      this.loading=true
      this.$request.post('/test/create/test',this.form1).then(res=>{
        if(res.code === '200'){
          // this.$router.push('/manager/content')
          this.count=this.count+1
          this.$message.success('创建成功')
        }else{
          this.$message.error(res.msg)
        }
        this.getTestList()
        this.loading=false
        this.isShow1=false
        this.isShow2=true
      })
    },
    onSubmit2(){
      this.form1.userid=JSON.parse(localStorage.getItem("xm-user")).userid
      this.$request.post('/test/human/create/test',this.form1).then(res=>{
        if(res.code === '200'){
          this.testid=res.data
          this.$request.post('/test/human/question/total',this.form1).then(res=>{
            if(res.code === '200'){
              this.table=[...res.data.选择题,...res.data.填空题,...res.data.解答题]
              this.isShow1=false
              this.isShow3=true
              console.log(res.data)
              this.formHeight=700
            }

          })

        }else{
          this.$message.error(res.msg)
        }

      })
    },
    onChange1(){
      if(this.form1.sChoice){
        this.formHeight=this.formHeight+50
      }else{
        this.formHeight=this.formHeight-50
      }
    },
    onChange2(){
      if(this.form1.gFilling){
        this.formHeight=this.formHeight+50
      }else{
        this.formHeight=this.formHeight-50
      }
    },
    onChange3(){
      if(this.form1.qAnswers){
        this.formHeight=this.formHeight+50
      }else{
        this.formHeight=this.formHeight-50
      }
    },
    create1(){
      this.isShow2=false
      this.isShow=true
    },
    deleted(){
      this.$confirm('确认删除？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
          .then(() => {
            // 用户点击确定按钮
            console.log('用户点击了确定');
            this.testList.forEach((item, index) => {
              console.log(item); // 这里可以执行你需要的逻辑
              if(item.testname===this.input){
                this.$request.post('/test/delete',{testid:item.testid}).then(res=>{
                  if(res.code === '200'){
                    this.$message.success('删除成功')
                    this.getTestList()
                    this.input=''
                  }else{
                    this.$message.error(res.msg)
                  }
                })
                return;
              }
            });
            // 执行关闭操作
            done();
          })
          .catch(() => {
            // 用户点击取消按钮
            console.log('用户点击了取消');
            // 这里可以执行一些取消操作的逻辑，或者什么都不做
          });


    },
    toContent(item){
      console.log(item.testid)
      this.$router.push({
        path:'/manager/content',
        query:{
          testid:item.testid
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    onSubmit3(){
      console.log(this.multipleSelection)
      this.$request.post('/test/human/question/create', {questions:this.multipleSelection,testid:this.testid,userid:JSON.parse(localStorage.getItem("xm-user")).userid}).then(res=>{
        this.isShow3=false
        this.isShow2=true
        this.getTestList()
        this.$message.success('创建成功')
      })
    }
  }
}
</script>

<style scoped>
  .container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .el-form{
    width: 650px;
    margin-top: 100px;
    background-color: #DEEAEF;
    padding: 40px;
    border-radius: 15px;
  }
  .item1:hover{
    opacity: 0.3;
  }
  .box1{
    width: 1000px;
    margin-top: 100px;
    background-color: #DEEAEF;
    padding: 40px;
    border-radius: 15px;
  }
</style>